<template>
  <el-row :style="styleSet">
    <el-col :span="5">
      <div class="content">
        <img class="icon" src="/image/todo.png">
        <div class="text">
          <span class="title">我的待办</span>
          <span class="num" @click="openMsg('todo')">{{ census['001'] == null ? 0 : census['001'] }}</span>
        </div>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="content">
        <img class="icon" src="/image/my.png">
        <div class="text">
          <span class="title">我发起的</span>
          <span class="num" @click="openMsg('my')">{{ census['003'] == null ? 0 : census['003'] }}</span>
        </div>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="content" @click="openMsg('done')">
        <img class="img" src="/image/done.png">
        <span class="name">我的已办</span>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="content" @click="openMsg('copy')">
        <img class="img" src="/image/copy.png">
        <span class="name">抄送给我的</span>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="content" @click="createApp">
        <img class="img" src="/image/begin.png">
        <span class="name">发起流程</span>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { GetMsgTotal } from '@/api/msg/msg'
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      styleSet: {
        width: '100px'
      },
      census: {}
    }
  },
  computed: {
    ...mapGetters(['subSystem', 'curSysId'])
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.loadCensus()
        }
      },
      immediate: true
    },
    width: {
      handler(val) {
        if (val && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.width) {
          this.init()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.styleSet = {
        width: width + 'px'
      }
    },
    createApp() {
      this.$router.replace({ name: 'appList' })
    },
    async loadCensus() {
      this.census = await GetMsgTotal({
        MsgClassify: ['001', '003'],
        MsgType: 1,
        MsgStatus: 1
      })
    },
    openMsg(type) {
      if (type === 'todo') {
        this.jumpRoute('todoMsg')
      } else if (type === 'done') {
        this.jumpRoute('doneMsg')
      } else if (type === 'copy') {
        this.jumpRoute('copyMsg')
      } else if (type === 'my') {
        this.jumpRoute('myTodo')
      }
    },
    jumpRoute(name) {
      const subId = this.getSubSysId(name)
      if (subId != null && this.curSysId !== subId) {
        this.$store.dispatch('user/switchSubSys', subId)
      }
      this.$router.replace({ name: name })
    },
    getSubSysId(name) {
      for (let i = 0; i < this.subSystem.length; i++) {
        const sub = this.subSystem[i]
        const routes = this.fullRoutes[sub.Id]
        if (this.checkIsExist(routes, name)) {
          return sub.Id
        }
      }
      return null
    },
    checkIsExist(routes, name) {
      for (let i = 0; i < routes.length; i++) {
        const route = routes[i]
        if (route.children != null && route.children.length > 0) {
          if (this.checkIsExist(route.children, name)) {
            return true
          }
        } else if (route.name === name) {
          return true
        }
      }
      return false
    }
  }
}
</script>
<style scoped>
.content {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  text-align: center;
}
.content .icon{
  width: 64px;
  margin-top: 10px;
  margin-right: 20px;
  float: left;
}
.content img {
  width: 64px;
  height: 64px;
}
.content .name {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
}
.content .text {
  float: right;
   margin-top: 10px;
}
.content .text span {
  display:inline-block;
  width: 100%;
  text-align: left;
}
.content .text .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 2px;
}
.content .text .num {
    height: 36px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
}
</style>
